<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>user</title>
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/font/iconfont.css" />
    <style>
        .user_box {
            display: flex;
            flex-direction: column;
            height: 150px;
            justify-content: center;
            position: relative;
            background: rgb(244, 0, 0);
            background: linear-gradient(164deg, rgba(244, 0, 0, 0.9809173669467787) 2%, rgba(251, 230, 230, 1) 27%, rgba(205, 16, 16, 0.9024859943977591) 47%, rgba(254, 254, 254, 1) 85%);
        }


        .user_wrap {
            display: flex;
            margin-bottom: 25px;
            flex-direction: row;
            align-items: center;
            height: 60px;
            z-index: 2;
        }

        .user_logo {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-left: 20px;
            background-color: #f8f8f8;
        }

        .user_name {
            flex: 1;
            font-size: 17px;
            color: white;
            margin: 0 15px;
        }

        .user_gor {
            width: 16px;
            height: 16px;
            margin-right: 20px;
        }

        .user-order {
            position: relative;
            margin: -40px 15px 0 15px;
        }

        .content_item_box {
            border-radius: 4px;
            background-color: white;
            margin-bottom: 10px;
            padding: 0 10px;
        }

        /* order */
        .title_box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f8f8f8;
            height: 40px;
        }

        .title_gor {
            width: 10px;
            height: 10px;
        }

        .title_zi {
            font-size: 14px;
            color: #333333;
            font-weight: bold;
        }

        .user_btn_box {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            height: 80px;
        }

        .user_btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }

        .btn_icon {
            width: 24px;
            height: 24px;
        }

        .btn_zi {
            font-size: 12px;
            color: #333333;
        }

        .user_red {
            position: absolute;
            height: 12px;
            line-height: 12px;
            text-align: center;
            font-size: 11px;
            background-color: red;
            color: #fff;
            border-radius: 6px;
            right: 0;
            top: -6px;
            padding: 0 3px;
        }

        .user-menu {
            border-radius: 4px;
            background-color: white;
            padding: 0 10px;
            margin: 0 15px;
        }

        .menu_item_box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f8f8f8;
            height: 49px;
        }

        .menu_item_box:active {
            opacity: 0.7;
        }

        .title_menu_zi {
            font-size: 14px;
            color: #333333;
        }
    </style>
</head>

<body>
    <div class="page" @vue:mounted="mounted">
        <div class="nav-bar">
            <div onclick="core.back()" class="nav-bar-back">

                <span class="icon iconfont icon-fanhui m_r_10"></span>
                <span class="nav-bar-back-text">返回</span>
            </div>
            <span class="nav-bar-title  ">用户设置</span>
        </div>

        <div class="scroll-view-y">
            <!-- 用户信息 -->

            <!-- 信息列表 -->
            <div class="user-menu   mt20" v-for="item of data.menuList" :key="item.id">
                <div class="menu_item_box  " data="index" @click="clickMenu(item)">
                    <span class="title_menu_zi  ">{{item.title}}</span>
                    <span class="icon iconfont icon-jinru"></span>
                </div>
            </div>

            <div class=" mauto  mt20   p12 w100px h30 backCBlue textac br2 Cwhite lh30" onclick="fnLogout( )">退出登录</div>

        </div>

    </div>
</body>
<script src="../script/api.js"></script>
<script src="../script/common.js"></script>
<script type="module">
    import { createApp } from 'https://www.chenxiangle.com/app/web/script/pvue.js';
    const APP = () => {
        createApp({
            data: {
                menuList: [
                    { id: 5, "title": "用户资料", name: 'edit', url: "useredit.html?action=edit" },
                    { id: 2, "title": "设置密码", name: 'pass', url: "useredit.html?action=pass" },
                    // {id:0,	"title": "收货地址",name:'address', url :"address_list.html"	},
                    { id: 1, "title": "关于我们", name: 'about', url: "about.html" },
                    { id: 2, "title": "服务协议", name: 'about', url: "news.html?id=2&aa=服务" },
                    { id: 3, "title": "隐私政策", name: 'about', url: "news.html?id=1&aa=服务" },
                    { id: 4, "title": "注销删除账号", name: 'signoff', url: "signoff" },
                ]
            }

            ,
            clickMenu(obj) {
                let name, url;
                console.log(obj);
                name = obj.name;
                url = obj.url;
                if (url == "signoff") {
                    signOff();
                    return;
                }
                if (name != '' && url != '') {
                    api.openWin({
                        name,
                        url
                    })
                }
            },
            mounted() {

            }
        }).mount()
    }

    window.apiready = () => {
        $api.fixStatusBar($api.dom('.nav-bar'));
        APP();
    }

</script>
<script>

    function getCacheSize() {
        api.getCacheSize(function (ret) {
            var size = ret.size;
            var cacheSize = $api.byId('cacheSize');
            size = parseInt((size / 1024 / 1024) * 100) / 100;
            cacheSize.innerHTML = size + ' M';
        });
    }

    function fnClearCache() {
        api.clearCache(function () {
            api.toast({
                msg: '缓存清除完毕'
            });
            setTimeout(function () {
                getCacheSize();
            }, 300);
        });
    }

    function fnOpenAboutWin() {
        api.openWin({
            name: 'about',
            url: './about.html'
        });
    }

    function fnLogout() {
        api.confirm({
            title: '提示',
            msg: '是否退出登录',
            buttons: ['确定', '取消']
        }, function (ret, err) {
            if (ret) {
                if (1 == ret.buttonIndex) {
                    $api.clearStorage();
                    core.initUser();  // 调用user页面的initUser方法
                    core.login();


                }
            }
        });
    }

    async function postSignOff() {
        let res = core.post("app/signoff", {});
    }

    function signOff() {
        api.confirm({
            title: '注销删除账号',
            msg: '您确认需要永久注销删除您的账号和所有数据，请确定继续操作吗?',
            buttons: ['确定', '取消']
        }, function (ret, err) {
            var index = ret.buttonIndex;
            console.log(index);
            if (index == 1) {
                // postSignOff();
                api.alert({
                    msg: '您的注销申请已经提交,将在24小时内删除您的所有数据.'
                });
            }
        });
    }


</script>

</html>